<script setup>
import { RouterLink, RouterView } from 'vue-router'
</script>

<template>
  <div class="main-content">
    <RouterView />
  </div>
</template>

<style scoped>
header {
  position: fixed; /* 固定在页面顶部 */
  top: 0; /* 距离页面顶部 0px */
  left: 0; /* 距离页面左侧 0px */
  width: 100%; /* 宽度为 100% */
  background-color: #333; /* 背景颜色 */
  color: white; /* 文字颜色 */
  padding: 10px 0; /* 上下内边距 */
  text-align: center; /* 文字居中 */
  z-index: 1000; /* 确保导航栏在其他内容之上 */
  height: 100px;
}

RouterLink {
  color: white; /* 链接文字颜色 */
  text-decoration: none; /* 去掉下划线 */
  margin: 0 15px; 
}

RouterLink:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.main-content {
  padding-top: 60px; /* 根据导航栏高度调整 */
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
}
</style>